<template> 
  <div class="com_div com_div_pic">
    <div class="com_left">
      <div><span>{{this.item_data.attrName}}</span></div>
      
      
    </div>
    <div class="com_right">
        <!-- 
            整理下思路：
            1、这是单文件上传，我选择了一个文件，她会展示在界面缩略图中，我点击手动上传，开始自动上传文件
            2、上传文件之前，执行 before-upload，获取到 oss服务 的签名，并保存
            3、真正的上传，action指定上传地址，data指定额外参数
            4、成功 or 失败，都会有对应的策略，成功：从 data 中获取到 图片 的路径
            5、修改 attrValue 的值，并修改 item_data 中 attrValue 的值
        :file-list="fileList"
        -->
        <el-upload
        ref="upload"
        action="http://localhost:8050/fileUpload"
        :data="dataObj"
        list-type="picture-card"
        :auto-upload='false'
        :multiple="false" 
        :before-upload="beforeUpload"
        :before-remove="beforeRemove"
        :on-change="handleChange"
        :on-remove="handleRemove"
        :on-success="handleUploadSuccess"
        :on-preview="handlePreview">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                    <!-- 查看 -->
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" >
                        <i class="el-icon-zoom-in"></i> 
                    </span>
                    <!-- 下载 -->
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)" >
                        <i class="el-icon-download"></i>
                    </span>
                    <!-- 删除 -->
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)" >
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
            <!-- <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div> -->
        </el-upload>

        <!-- 这个 dialog 用于 在用户点击 已经上传的图片 时，进行图片的显示 -->
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <!-- <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="fileList[0].url" alt="">
        </el-dialog> -->
        <div>
          <el-button @click="showPicDetail">显示图片信息</el-button><br>
          <el-button @click="doUpload">手动上传图片</el-button><br>
          <el-button @click="test8050">测试8050</el-button>
        </div>
    </div>
    
  </div>
</template>
<script>
   import {policy} from './policy'
   import { getUUID } from '@/utils'

  export default {
    name: 'singleUpload',
    props: {
    //   value: String,
      item_data: Object,
    },
    computed: {
      allFileList(){
        return this.$refs.upload.uploadFiles;
      }
    },
    data() {
      return {
        attrValue: '',
        dataObj: {
          policy: '',
          signature: '',
          key: '',
          ossaccessKeyId: '',
          dir: '',
          host: '',
          // callback:'',
        },
        fileList: [], // 已成功上传的 图片列表
        dialogVisible: false,
        dialogImageUrl: '',
        disabled: false,
      };
    },
    methods: {
      test8050(){
        this.$http1({
          url: "http://127.0.0.1:8050/file",
          method: "post",
        }).then(({ data }) => {
          this.$message({
            type: "success",
            message: "成功!",
          });
          console.log("test8050", data)
          
        });
      },
        showPicDetail(){
            console.log("showPicDetail", this.fileList.length, this.fileList, this.allFileList)
        },
        doUpload(){
          console.log("手动上传图片")
          this.$refs.upload.submit();
        },
        handleChange(file,fileList){
          console.log("onChange", file, fileList)
        },
        
      emitInput(val) {
        this.$emit('input', val)
      },
      
      handleRemove(file, fileList) {
        console.log("onRemove", file, fileList)
        this.emitInput('');
      },
      handlePreview(file) {
        this.dialogVisible = true;
      },
      
      beforeRemove(file, fileList){
          console.log("beforeRemove", file, fileList)
      },

      beforeUpload(file) {
        console.log("beforeUpLoad",file)
        let _self = this;
        // 先向 后端oss服务 获取到对应的签名，并保存起来
        /*
        return new Promise((resolve, reject) => {
          policy().then(response => {
            _self.dataObj.policy = response.data.policy;
            _self.dataObj.signature = response.data.signature;
            _self.dataObj.ossaccessKeyId = response.data.accessid;
            // 下面一行中，老师删除了 '/'，我先暂时不删
            _self.dataObj.key = response.data.dir + '/'+getUUID()+'_${filename}';
            _self.dataObj.dir = response.data.dir;
            _self.dataObj.host = response.data.host;
            resolve(true)
          }).catch(err => {
            reject(false)
          })
        })
        */
      },
      handleUploadSuccess(res, file, fileList) {
        console.log("上传成功...", file, fileList)
        console.log('success', file.response.fileUrl);
        
        // 这个 fileList 不能，他好像是跟 什么东西 挂钩的
        this.fileList.push({name: file.name, url: file.response.fileUrl})
        // this.showFileList = true;
        // this.fileList.pop();
        // this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) });
        // 获取 图片的url
        // var str = this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name)
        // this.setAttrValue(str)
        // this.emitInput(this.fileList[0].url);

      },

      setAttrValue(attrValue){
          this.attrValue = attrValue;
          this.item_data.attrValue = attrValue;
      },

      /**
       * 下面三剑客：对 上传后的图片 的一些操作
       */
      handleRemove(file) {

        var index = this.getFileListIndex(file, this.allFileList)
        if(index != -1){
          this.allFileList.splice(index, 1);
          console.log("成功删除这个图片",file, file.response);
          if(typeof file.response !== 'undefined'){
            this.updateFileList();
          }
        }
      },
      updateFileList(){
        let temp = [];
        for(var i = 0;i<this.allFileList.length;i++){
          if(typeof this.allFileList[i].response !== 'undefined'){
            temp.push({name: this.allFileList[i].name, url: this.allFileList[i].response.fileUrl});
          }
        }
        this.fileList = temp;
        console.log("updateFileList", this.fileList, this.allFileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log('下载这个图片',file);
      },

      getFileListIndex(file, fileList){
        for(var i = 0;i<fileList.length;i++){
          if(file.uid === fileList[i].uid){
            return i;
          }
        }
        return -1;
      }
      
    }
  }
</script>
<style>
.com_div_pic{
  height: 155px;
}
</style>


